<template>
<div class="app">

  <el-divider/>

  <div class="item" v-for="(item,index) in getUnRead" :key="index">

      <div class="item">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-badge is-dot class="item">
              <div>
                <el-avatar :src="item.targetImg | url"></el-avatar>
              </div>
            </el-badge>
          </el-col>
          <el-col :span="18">
            <div class="item-message">
              <div class="item-message-title">
                <h5>{{item.title}}</h5>

              </div>
              <div class="item-message-content">
                <span>{{item.content}}</span>
              </div>

            </div>
          </el-col>
        </el-row>

      </div>


    </div>

</div>
</template>

<script>

export default {
  name: "MessageComponent",
  props: {},
  data() {
    return {}
  }, methods: {}, watch: {}, computed: {
    getUnRead(){
      return this.$store.getters.getUser.unread
    }
  },filters:{
    url(value){
      return 'api'+value;
    }
  }
}
</script>

<style scoped>
.app{
  width: 350px;
  height: auto;
  line-height: 10px;
}
.item{
  width: 280px;
  height: 70px;

  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

}
.item:hover{
}
.item-message{
  background-color: rgba(51, 51, 51, 0.1);
  border-radius: 4px;
  width: 200px;
}
.item-message-title {
  height: 1rem;
  border-bottom-style: solid;
  border-bottom-color: #333333;
  border-bottom-width: 1px;
}
.item-message-content{
  height: 1rem;
  width: 100%;
  padding-top: 0.3rem;
  line-height: 10px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: center;
}
</style>